<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('外包人员')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: bootstrap-treeview-css" />
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
    <link th:href="@{/css/detail.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/page_epiboly.css}" rel="stylesheet"/>
</head>
<body class="gray-bg epiboly">
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="swiper tabSwiper">
            <ul class="nav nav-tabs first-navtabs swiper-wrapper" role="tablist">
                <li class="swiper-slide active"><a href="#box-page" role="tab" data-toggle="tab">页面</a></li>
                <!--<li class="swiper-slide"><a href="#box-relationtable" role="tab" data-toggle="tab">表模型</a></li>-->
                <!--<li class="swiper-slide"><a href="#box-bff" role="tab" data-toggle="tab">BFF</a></li>-->
                <!--<li class="swiper-slide"><a href="#box-dubbo" role="tab" data-toggle="tab">Dubbo</a></li>-->
                <!--<li class="swiper-slide"><a href="#box-use" role="tab" data-toggle="tab">表模型</a></li>
                <li class="swiper-slide"><a href="#box-use" role="tab" data-toggle="tab">表模型</a></li>-->
            </ul>
        </div>
        <input type = "hidden" name = "userId">
        <div class="tab-content mt0" id="box-main-tabs"></div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="container-div" id="wrapper">
        <!-- Sidebar -->
        <div id="page-content-wrapper">
            <div class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
                <img class="toggle-img" th:src="@{/img/toggle.png}"/>
            </div>
            <div class="container">
                <div class="pull-left" style="position: absolute;">
                    <div id = "userListSelectDiv"></div>
                    <div class="container-left">
                        <ul class="nav nav-tabs navtabs contentTab" role="tablist">
                            <li class="active">
                                <a href="#by-page" role="tab" data-toggle="tab" onclick="tabClick(1)">按页面
                                </a></li>
                            <li><a href="#by-interface" role="tab" data-toggle="tab" onclick="tabClick(2)">按接口</a></li>
                        </ul>
                        <div class="tab-content mt0">
                            <div role="tabpanel" class="tab-pane active mt15" id="by-page">
                                <ul class="container-ul" id="containerUl">
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane mt15" id="by-interface">
                                <div class="panel-body">
                                    <div class="panel-group" id="interfaceList">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div id="treeview" class="treeview"></div>-->
                </div>
                <div class="pull-right" id = "pageDetailsDiv"></div>
                <div id = "versionListSelectDiv"></div>
            </div>
        </div>
        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top sidebar-wrapper" id="sidebar-wrapper" role="navigation">
            <div class="pull-right">
                <ul class="nav nav-tabs navtabs contentTab" role="tablist">
                    <li class="active"><a href="#content-relation-bff-img" role="tab" data-toggle="tab" data-action = "relationBffImgList">接口图</a></li>
                    <li><a href="#content-relation-table" role="tab" data-toggle="tab" data-action = "relationTableList">关联表</a></li>
                    <li><a href="#content-relation-usage" role="tab" data-toggle="tab" data-action = "relationUsageList">关联用况</a></li>
                    <li><a href="#content-question" role="tab" data-toggle="tab" data-action = "relationQuestionList">问题</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active mt15 content-image" id="content-relation-bff-img"></div>
                    <div role="tabpanel" class="tab-pane mt15 content-relationtable" id="content-relation-table"></div>
                    <div role="tabpanel" class="tab-pane mt15 content-use" id="content-relation-usage"></div>
                    <div role="tabpanel" class="tab-pane mt15 question-div" id="content-question">
                        <span>查看所有问题备注</span>
                    </div>
                </div>
            </div>
            <div id="nav-content-detail">

            </div>
        </nav>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: bootstrap-treeview-js" />
<script id="boxMainTabsTpl" type="text/template">
    <div role="tabpanel" class="tab-pane active box-swiper-li" id="{{d.id}}">
        {{# if(d.id=='box-bff'){ }}
        <select class="form-control state-select">
            <option value="1" selected="selected">不限版本</option>
            <option value="2">张三 前端工程师</option>
            <option value="3">李四 业务架构师</option>
        </select>
        {{# } }}
        <ul>
            {{# layui.each(d.data, function(index, a){ }}
            <li data-id="{{a.userId}}" data-type="{{d.type}}"
                class="{{# if(index == 0){ }}active{{# } else { }}{{# }}}">
                <div>
                    <p><span>{{a.username}}</span>
                        <font class="pull-right">{{d.name}}：{{a.dataFinishCount}}/{{a.dataTotalCount}}</font>
                    </p>
                    <p class="user-info"><span>{{a.roleName}}</span><span>{{# if(a.status == 0){ }}未完成{{# } else if(a.status == 1){ }}进行中{{# } else { }}已完成{{# }}}</span></p>
                </div>
            </li>
            {{# }); }}
        </ul>
    </div>
</script>

<script id="versionListSelectTpl" type="text/template">
    <input type = "hidden" name = "productVersionId">
    <select class="form-control edition-select versionSelect">
        <option value="" selected="selected">全部版本</option>
        {{# layui.each(d, function(index, a){ }}
        <option value="{{a.id}}">{{a.productName}}</option>
        {{# }); }}
    </select>
</script>

<script id="containerUlTpl" type="text/template">
    {{# layui.each(d, function(index, a){ }}
    <li data-id="{{a.id}}" class="{{# if(index == 0){ }}active{{# }}}">
        <div><span>{{index+1}}</span><span>{{a.pageName}}</span></div>
        {{# layui.each(a.userList, function(indexB, b){ }}
        <p class="user-info">
            <span>{{b.username}}&nbsp;{{b.roleName}}</span>
            <span>{{# if(b.objectStatus == 0){ }}未完成{{# } else if(b.objectStatus == 1){ }}进行中{{# } else { }}已完成{{# }}}</span>
        </p>
        {{# }); }}
    </li>
    {{# }); }}
</script>

<script id="interfaceUlTpl" type="text/template">
    {{# layui.each(d, function(index, a){ }}
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" aria-expanded="true" href="#interface{{index}}">
            <div class="panel-title active">
                <div class="panel-title-interface"><span>{{index+1}}</span><span>{{a.pageName}}</span></div>
                {{# layui.each(a.userList, function(indexB, b){ }}
                <p class="user-info">
                    <span>{{b.username}}&nbsp;{{b.roleName}}</span>
                    <span>{{# if(b.objectStatus == 0){ }}未完成{{# } else if(b.objectStatus == 1){ }}进行中{{# } else { }}已完成{{# }}}</span>
                </p>
                {{# }); }}
            </div>
        </div>
        <div id="interface{{index}}" class="panel-collapse collapse in">
            <ul class="interface-ul">
                {{# layui.each(a.interfaceList, function(bindex, b){ }}
                <li data-pindex="{{index}}" data-index="{{bindex}}"><div>{{b.interfaceName}}</div></li>
                {{# }); }}
            </ul>
        </div>
    </div>
    {{# }); }}
</script>

<script id="pageImgListTpl" type="text/template">
    <div id="carousel-generic{{d.type}}" class="carousel slide" data-ride="carousel" style="{{# if(d.type == 0){ }}margin-bottom: 100px;{{# } }}">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            {{# layui.each(d.imgList, function(index, a){ }}
            <li data-target="#carousel-generic{{d.type}}" data-slide-to="{{index}}" data-isMaster="{{a.isMaster}}"
                data-id="{{a.id}}" data-objid="{{a.objectId}}" class="{{index==0?'active':''}} {{a.red?'red':''}}">
                <span>{{index + 1}}</span>
            </li>
            {{# }); }}
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            {{# layui.each(d.imgList, function(index, a){ }}
            {{# if(index==0) { }}
            <div class="item active">
                <img class = "partPage" src="{{a.filePath}}" th:onerror="this.src='/img/per-info.png'"/>
                <div class="carousel-caption"></div>
            </div>
            {{# } else { }}
            <div class="item">
                <img class = "partPage" src="{{a.filePath}}" th:onerror="this.src='/img/per-info.png'"/>
                <div class="carousel-caption"></div>
            </div>
            {{# } }}
            {{# }); }}
        </div>
    </div>
</script>

<script id="pageDetailsTpl" type="text/template">
    {{# if(d.type == 0){ }}
    <div class="title">
        <span>{{d.pageName || ''}}</span>
        <div class="pull-right title-right">
            <span id = "pageStatusDesc">{{# if(d.objectStatus == 0 || d.objectStatus == null){ }}未完成{{# } else if(d.objectStatus == 1){ }}进行中{{# } else { }}已完成{{# }}}</span>
            {{# if(d.handlePower){ }}
            <select class = "pageStatusCls">
                <option value="0">未完成</option>
                <option value="1">进行中</option>
                <option value="2">已完成</option>
            </select>
            {{# } }}
            <a class="aHref" data-path="page/page/detail/{{d.id}}" data-tit="页面详情">查看页面详情</a>
        </div>
    </div>
    {{# if(d.interfaceId2 == 0){ }}
    <div class="page-name" style="margin-bottom: 20px;">
        <div class="list-group list-group-horizontal" id = "pageTagListDiv"></div>
    </div>
    <!--<div class="img-action" style="text-align: center;margin-bottom: 20px;">-->
        <!--<a style="margin: 10px;" class = "uploadPageImage" data-id = "{{d.id}}" >上传图片</a>-->
        <!--<a style="margin: 10px;" class = "delPageImage"  data-id="{{d.id}}">删除图片</a>-->
        <!--<a style="margin: 10px;" class = "pageImageSort" data-type = "0" data-id="{{d.id}}">设置排序</a>-->
        <!--<a style="margin: 10px;" class = "updatePageTage" data-type = "0" data-id="{{d.id}}">新增页面主题</a>-->
        <!--<a style="margin: 10px;" class = "updatePageTage" data-type = "1" data-id="{{d.id}}">选择页面主题</a>-->
    <!--</div>-->
    {{# } }}
    {{# } }}
    <div id = "pageImgListDiv"></div>
</script>

<script id="relationBffImgListTpl" type="text/template">
    <ul data-action="content-image-detail">
        {{# layui.each(d, function(index, a){ }}
        {{# if(a.showImgType == 0){ }}
        <li  data-index = "{{index}}" data-type="1">
            <div>{{a.interfaceName}}</div>
            {{# layui.each(a.userList, function(indexc, c){ }}
            <p class="user-info" style="margin-left:26px;">
                <span>{{c.username}}&nbsp;{{c.roleName}}</span>
                <span>{{# if(c.objectStatus == 0){ }}未完成{{# } else if(c.objectStatus == 1){ }}进行中{{# } else { }}已完成{{# }}}</span>
            </p>
            {{# }); }}
        </li>
        {{# } else if(a.showImgType == 1){ }}
        <li  data-index = "{{index}}" data-type="1">
            <img th:src="@{/img/page.png}">
            <div>{{a.interfaceName}}</div>
            {{# layui.each(a.userList, function(indexc, c){ }}
            <p class="user-info" style="margin-left:26px;">
                <span>{{c.username}}&nbsp;{{c.roleName}}</span>
                <span>{{# if(c.objectStatus == 0){ }}未完成{{# } else if(c.objectStatus == 1){ }}进行中{{# } else { }}已完成{{# }}}</span>
            </p>
            {{# }); }}
        </li>
        {{# } else { }}
        {{# layui.each(a.fileList, function(indexB, b){ }}
        <li  data-index = "{{index}}" data-type="1">
            <img src="{{b.filePath}}"  th:onerror="this.src='/img/page.png'"/>
            <div>{{a.interfaceName}}</div>
            {{# layui.each(a.userList, function(indexc, c){ }}
            <p class="user-info" style="margin-left:26px;">
                <span>{{c.username}}&nbsp;{{c.roleName}}</span>
                <span>{{# if(c.objectStatus == 0){ }}未完成{{# } else if(c.objectStatus == 1){ }}进行中{{# } else { }}已完成{{# }}}</span>
            </p>
            {{# }); }}
        </li>
        {{# }); }}
        {{# }; }}
        {{# }); }}
    </ul>
</script>

<script id="relationTableListTpl" type="text/template">
    <ul>
        {{# layui.each(d, function(index, a){ }}
        <li data-index = "{{index}}" data-type="2">
            <div>
                <p title="{{a.tableName}}"><!--<span>{{index + 1}}</span>-->{{a.tableName}}</p>
                {{# layui.each(a.userList, function(indexB, b){ }}
                <p class="user-info">
                    <span>{{b.username}}&nbsp;{{b.roleName}}</span>
                    <span>{{# if(b.objectStatus == 0){ }}未完成{{# } else if(d.objectStatus == 1){ }}进行中{{# } else { }}已完成{{# }}}</span>
                </p>
                {{# }); }}
            </div>
        </li>
        {{# }); }}
    </ul>
</script>

<script id="relationUsageListTpl" type="text/template">
    <ul>
        {{# layui.each(d, function(index, a){ }}
        <li data-index = "{{index}}"  data-type="3">
            <div>
                <p title="{{a.usageyName}}"><!--<span>{{index + 1}}</span>-->{{a.usageyName}}</p>
                {{# layui.each(a.userList, function(indexB, b){ }}
                <p class="user-info">
                    <span>{{b.username}}&nbsp;{{b.roleName}}</span>
                    <span>{{# if(b.objectStatus == 0){ }}未完成{{# } else if(d.objectStatus == 1){ }}进行中{{# } else { }}已完成{{# }}}</span>
                </p>
                {{# }); }}
            </div>
        </li>
        {{# }); }}
    </ul>
</script>

<script id="contentDetailsTpl" type="text/template">
    {{# if(d.contentType == 4) { }}
    <div role="tabpanel" class="tab-pane mt15 content-question">
        {{# if(d.questionCount== 0){ }}
        <div class="empty">
            <p><img th:src="@{/img/empty.png}"/></p>
            <p>暂无问题备注</p>
            <p><button type="button" class="btn btn-primary add-question">提交问题</button></p>
        </div>
        {{# } else {}}
        <div class="questions">
            <p class="pull-left">当前共{{d.questionCount}}个问题</p>
            <a class="pull-right add-question" style = "cursor: pointer;"><img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;margin-top: -3px;" />提问题</a>
        </div>
        <ul class="list-group ques-list">
            {{# layui.each(d.list, function(index, a){ }}
            <li class="list-group-item">
                <div>
                    <div class="pull-left">
							<span><img class="head-img list-head-img" th:src="@{/img/login-background.jpg}"/>· {{a.createBy || '一'}} · {{a.createTime || '一'}}<span>
                    </div>
                    <div class="pull-right list-item-right-div">
                        {{# if(a.handleStatus == 0){ }}
                        <span>未解决</span>
                        <a class="pageQuestionHandle" data-id="{{a.id}}">设为已解决</a>
                        {{# } else { }}
                        <span>已解决</span>
                        {{# }}}
                        <icon class="icon del delete-question" data-id="{{a.id}}" style = "cursor: pointer;"></icon>
                    </div>
                </div>
                <p>{{a.title || '一'}}</p>
                <p>{{a.description || '一'}}</p>
                <ul class="list-group-horizontal">
                    {{# layui.each(a.fileInfList, function(indexB, b){ }}
                    <li class="list-group-item" style="box-shadow:none"><img class = "partPage" src="{{b.filePath}}" th:onerror="this.src='/img/default-img.png'"/><p style="text-align: center;word-break: break-all;">{{b.fileName}}</p></li>
                    {{# }); }}
                </ul>
            </li>
            {{# }); }}
        </ul>
        {{#} }}
    </div>
    {{# } else if(d.contentType == 3) { }}
    <div role="tabpanel" class="tab-pane content-usage mt15 ">
        <ul class="list-group">
            <li class="list-group-item">
                <div class="list-tit">
                    <p>
                        <span>{{# if(d.fbType=='1') { }} 前台 {{#} else { }}后台{{#}}}</span>
                        <span>{{# if(d.usageType=='1') { }} 增 {{# } else if(d.usageType == '2') { }} 删 {{# } else if(d.usageType == '3') { }} 改 {{#} else { }}查{{#}}}</span>
                        <span>{{d.usageyName || '一'}}</span>
                        <a class="pull-right usageDetailsCls" style = "cursor: pointer;" usageId = "{{d.id}}">查看用况详情</a>
                    </p>
                    <p>
                        <span style="">用况架构</span>
                        <span>
								{{# if(d.clientType=='1') { }} PCweb {{# } else if(d.clientType == '2') { }} H5 {{# } else if(d.clientType == '3') { }} APP {{#} else { }} 微信小程序 {{#}}}
								· {{# if(d.isAlone=='1') { }} 单模块 {{#} else { }} 非单模块 {{# }}}
								· {{# if(d.versionType=='1') { }} 新功能 {{# } else if(d.versionType == '2') { }} 优化 {{#} else { }} 废弃 {{#}}}
								</span>
                    </p>
                </div>
                <div class="list-content">
                    <p>用况故事</p>
                    <p>{{d.usageStory || '一'}}</p>
                </div>
                <div class="list-content">
                    <p>价值描述</p>
                    <p>{{d.valueDescription || '一'}}</p>
                </div>
                <div class="list-content">
                    <p>业务实现逻辑</p>
                    <p>{{d.businessImplDescription || '一'}}</p>
                </div>
                <div class="list-content">
                    <p>优化或废弃说明</p>
                    <p>{{d.versionDescription || '一'}}</p>
                </div>
            </li>
        </ul>
    </div>
    {{# } else if(d.contentType == 2) { }}
    <div role="tabpanel" class="tab-pane content-table mt15 pull-left">
        <div class="retation-table">
            <p>
                <img th:src="@{/img/table.png}">
                <span>{{d.tableName}}&nbsp;&nbsp;{{d.tableEnName}}</span>
                <span style="color: #0088FF;float: right;margin-right: 12px;"><a class = "table-detail" tableId = "{{d.id}}">查看详情</a></span>
            </p>
            <ul class="list-group">
                {{# layui.each(d.fieldInfoList, function(indexB, b){ }}
                {{# if(b.categorySpace) { }}
                <li class="list-group-item space"></li>
                {{# }}}
                <li class="list-group-item">
                    <font>{{# if(b.fieldType=='1') { }} PK {{# } else if(b.fieldType == '2') { }} FK {{#} else { }}-{{#}}}</font>
                    <span title="{{b.fieldName || '一'}}">{{b.fieldName || '一'}}</span>
                    <span title="{{b.fieldEnName || '一'}}">
									{{b.fieldEnName || '一'}}
									{{# if(b.fieldLength) { }}
										({{b.fieldLength}})
									{{# } }}
								</span>
                    <span>{{# if(b.fieldDataType=='1') { }} 文本 {{# } else if(b.fieldDataType == '2') { }} 数字 {{#} else { }}日期{{#}}}</span>
                </li>
                {{# }); }}
            </ul>
        </div>
    </div>
    {{# } else { }}
    <div class="content-detail pull-left">
        <div id="navCarouselDiv"></div>
        <div class="img-action"style="margin-top: 60px;text-align: center;">
            <a style="margin: 10px;" class = "aHref" data-path = "interface/interface/bffDetail/{{d.id}}" data-tit="接口详情">查看接口详情</a>
        </div>
        <div role="tabpanel" class="tab-pane content-usage mt15" style="width: calc(100% - 34px);" id = "bffUsageListDiv"></div>
        <div class="content-preview" id="partImageIntro">
        </div>
        <div class="ibox-content content-preview">
            <div class="panel-body">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading" data-toggle="collapse" href="#collapse0">
                            <div class="panel-title">
										<span class="label type-flag">
											{{# if(d.interfaceType=='1') { }} GET {{# } else if(d.interfaceType == '2') { }} POST {{# } else if(d.interfaceType == '3') { }} PUT {{#} else { }}DELETE{{#}}}</span>
                                <span>{{d.interfaceName}}&nbsp;&nbsp;{{d.interfaceUrl}}</span>
                            </div>
                        </div>
                        <div id="collapse0" class="panel-collapse collapse in">
                            <dl class="dl-horizontal">
                                <dt>非功能性需求</dt>
                                <dd id="nonFunctionalRequirementsDd">{{d.nonFunctionalRequirements}}</dd>
                            </dl>
                            <dl class="dl-horizontal">
                                <dt>接口描述</dt>
                                <dd id="interfaceDescriptionDd">{{d.interfaceDescription}}</dd>
                            </dl>
                            <ul class="nav nav-tabs navtabs" role="tablist" style="position: inherit">
                                <li class="active"><a href="#params" role="tab" data-toggle="tab">参数</a></li>
                                <li><a href="#fontSourcePreview" role="tab" data-toggle="tab" data-action="queryBffInterfaceField">前端来源预览</a></li>
                                <li><a href="#pageElementCondition" role="tab" data-toggle="tab" data-action="getConditionList">元素条件判断</a></li>
                            </ul>
                            <div class="tab-content mt0">
                                <div role="tabpanel" class="tab-pane active" id="params"></div>
                                <div role="tabpanel" class="tab-pane" id="fontSourcePreview"></div>
                                <div role="tabpanel" class="tab-pane pageElementCondition" id="pageElementCondition"></div>
                            </div>
                        </div>
                        <div class="panel-tit" id="virtualUsage">虚拟用况</div>
                        <div class="panel panel-default virtualUsage">
                            <div class="panel-heading" data-toggle="collapse" href="#collapse1" data-id="339">
                                <h1 class="panel-title"> <span class="badge badge-primary">1</span> <span>1-1-06修改平台授权范围&nbsp;&nbsp;updateBasePlatformAuthorize</span>
                                </h1>
                            </div>
                            <div id="collapse1" class="panel-collapse collapse"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{# } }}
</script>

<!--关联字段模板-->
<script id="bffParamTpl" type="text/template">
    <div class="panel-body" style = "border:0px;">
        <ul class="list-group">
            <li class="list-group-item" style="height: auto; padding-top:0px;">
                <div class="re-body">
                    <p>requestBody：//输入参数</p>
                    <p>{</p>
                    <ul class="list-group field">
                        {{# layui.each(d.requestList, function(index, a){ }}
                        {{# if(a.children == null || a.children.length == 0){ }}
                        <li class="list-group-item">
                            {{# if(a.objectType=='2'){ }}
                            <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '-'}}</p>
                            <br>
                            <p>}],</p>
                            {{# } else { }}
                            <p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '-'}}{{a.fieldEnumListName || ''}}</span></p>
                            {{# } }}
                        </li>
                        {{# } else { }}
                        <li class="list-group-item">
                            {{# if(a.children.length > 1){ }}
                            <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
                            <ul class="list-group field">
                                {{# layui.each(a.children, function(index, b){ }}
                                <li class="list-group-item" style = "margin-left:10px;">
                                    <p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
                                </li>
                                {{# }); }}
                            </ul>
                            <p>}],</p>
                            {{# } else { }}
                            <p>"{{a.fieldEnName}}" : ["{{a.children[0].mockData || '一'}}"], // {{a.fieldName || '一'}}</p>
                            {{# } }}
                        </li>
                        {{# }}}
                        {{# }); }}
                    </ul>
                    <p>}</p>
                </div>
            </li>
            <li class="list-group-item space"></li>
            <li class="list-group-item" style="height: auto;padding-top:0px;">
                <div class="re-body">
                    <p>response：//返回参数</p>
                    <p>{</p>
                    <ul class="list-group field">
                        <li class="list-group-item">
                            <p>"errCode" : "1",<span style="color: red; display: inline !important;"> //返回状态（true/false）</span></p>
                            <p>"message" : "获取成功",<span style="color: red; display: inline !important;"> //获取成功/获取失败</span></p>
                            <p>"data" : { <span style="color: red; display: inline !important;"> //返回数据</span></p>
                            <ul class="list-group field">
                                {{# layui.each(d.responseList, function(index, a){ }}
                                {{# if(a.children == null || a.children.length == 0){ }}
                                <li class="list-group-item">
                                    {{# if(a.objectType=='2'){ }}
                                    <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
                                    <p>}],</p>
                                    {{# } else { }}
                                    {{# if(a.fieldEnName == 'total' || a.fieldEnName == 'isLastPage' || a.fieldEnName == 'pages'){ }}
                                    <p>"{{a.fieldEnName}}" : {{a.mockData}}, // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '一'}}{{a.fieldEnumListName || ''}}</span></p>
                                    {{# } else { }}
                                    <p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '一'}}{{a.fieldEnumListName || ''}}</span></p>
                                    {{# } }}
                                    {{# } }}
                                </li>
                                {{# } else { }}
                                <li class="list-group-item">
                                    <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
                                    <ul class="list-group field">
                                        {{# layui.each(a.children, function(index, b){ }}
                                        {{# if(b.children == null || b.children.length == 0){ }}
                                        <li class="list-group-item">
                                            {{# if(b.objectType=='2'){ }}
                                            <p>"{{b.fieldEnName}}" : [{ // {{b.fieldName || '一'}}</p>
                                            <p>}],</p>
                                            {{# } else { }}
                                            <p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
                                            {{# } }}
                                        </li>
                                        {{# } else { }}
                                        <li class="list-group-item">
                                            <p>"{{b.fieldEnName}}" : [{ // {{b.fieldName || '一'}}</p>
                                            <ul class="list-group field">
                                                {{# layui.each(b.children, function(index, c){ }}
                                                {{# if(c.children == null || c.children.length == 0){ }}
                                                <li class="list-group-item">
                                                    {{# if(c.objectType=='2'){ }}
                                                    <p>"{{c.fieldEnName}}" : [{ // {{c.fieldName || '一'}}</p>
                                                    <p>}],</p>
                                                    {{# } else { }}
                                                    <p>"{{c.fieldEnName}}" : "{{c.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{c.fieldName || '一'}}{{c.fieldEnumListName || ''}}</span></p>
                                                    {{# } }}
                                                </li>
                                                {{# } else { }}
                                                <li class="list-group-item">
                                                    <p>"{{c.fieldEnName}}" : [{ // {{c.fieldName || '一'}}</p>
                                                    <ul class="list-group field">
                                                        {{# layui.each(c.children, function(index, d){ }}
                                                        {{# if(d.children == null || d.children.length == 0){ }}
                                                        <li class="list-group-item">
                                                            {{# if(d.objectType=='2'){ }}
                                                            <p>"{{d.fieldEnName}}" : [{ // {{d.fieldName || '一'}}</p>
                                                            <p>}],</p>
                                                            {{# } else { }}
                                                            <p>"{{d.fieldEnName}}" : "{{d.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{d.fieldName || '一'}}{{d.fieldEnumListName || ''}}</span></p>
                                                            {{# } }}
                                                        </li>
                                                        {{# } else { }}
                                                        <li class="list-group-item">
                                                            <p>"{{d.fieldEnName}}" : [{ // {{d.fieldName || '一'}}</p>
                                                            <ul class="list-group field">
                                                                {{# layui.each(d.children, function(index, e){ }}
                                                                <li class="list-group-item">
                                                                    <p>"{{e.fieldEnName}}" : "{{e.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{e.fieldName || '一'}}{{e.fieldEnumListName || ''}}</span></p>
                                                                </li>
                                                                {{# }); }}
                                                            </ul>
                                                            <p>}],</p>
                                                        </li>
                                                        {{# } }}
                                                        {{# }); }}
                                                    </ul>
                                                </li>
                                                {{# } }}
                                                {{# }); }}
                                            </ul>
                                            <p>}],</p>
                                        </li>
                                        {{# } }}
                                        {{# }); }}
                                    </ul>
                                    <p>}],</p>
                                </li>
                                {{# }}}
                                {{# }); }}
                            </ul>
                            <p>}</p>
                        </li>
                    </ul>
                    <p>}</p>
                </div>
            </li>
        </ul>
    </div>
</script>

<script id="bffUsageTpl" type="text/template">
    {{# if(d != null && d.length > 0){ }}
    <ul class="list-group">
        {{# layui.each(d, function(index, a){ }}
        <li class="list-group-item">
            <div class="list-tit">
                <p>
                    <span>{{# if(a.fbType=='1') { }} 前台 {{#} else { }}后台{{#}}}</span>
                    <span>{{# if(a.usageType=='1') { }} 增 {{# } else if(a.usageType == '2') { }} 删 {{# } else if(a.usageType == '3') { }} 改 {{#} else { }}查{{#}}}</span>
                    <span>{{a.usageyName || '一'}}</span>
                    <a class="pull-right usageDetailsCls" style = "cursor: pointer;" usageId="{{a.id}}">查看详情</a>
                </p>
                <p>
                    <span>用况架构</span>
                    <span>
								{{# if(a.clientType=='1') { }} PCweb {{# } else if(a.clientType == '2') { }} H5 {{# } else if(a.clientType == '3') { }} APP {{#} else { }} 微信小程序 {{#}}}
								· {{# if(a.isAlone=='1') { }} 单模块 {{#} else { }} 非单模块 {{# }}}
								· {{# if(a.versionType=='1') { }} 新功能 {{# } else if(a.versionType == '2') { }} 优化 {{#} else { }} 废弃 {{#}}}
							</span>
                </p>
            </div>
            <div class="list-content">
                <p>用况故事</p>
                <p>{{a.usageStory || '一'}}</p>
            </div>
            <div class="list-content">
                <p>价值描述</p>
                <p>{{a.valueDescription || '一'}}</p>
            </div>
            <div class="list-content">
                <p>业务实现逻辑</p>
                <p>{{a.businessImplDescription || '一'}}</p>
            </div>
            <div class="list-content">
                <p>优化或废弃说明</p>
                <p>{{a.versionDescription || '一'}}</p>
            </div>
        </li>
        {{# }); }}
    </ul>
    {{# } }}
</script>

<script id="partImageIntroTpl" type="text/template">
    {{# layui.each(d.imgList, function(index, a){ }}
    <dl class="dl-horizontal" data-index="{{index}}" style="{{index==0?'':'display:none'}}" >
        <dt>重要说明</dt>
        <dd>{{a.description||''}}</dd>
    </dl>
    {{# }); }}
</script>

<script id="bffVirtualUsageTpl" type="text/template">
    {{# layui.each(d.list, function(index, a){ }}
    <div class="panel panel-default virtualUsage">
        <div class="panel-heading" data-toggle="collapse"  href="#collapse{{a.sortNum}}" data-id="{{a.id}}">
            <h1 class="panel-title">
                <span class="badge badge-primary">{{index+1}}</span>
                <span>{{a.slaveInterfaceName}}&nbsp;&nbsp;{{a.dubboUrl}}</span>
            </h1>
        </div>
        <div id="collapse{{a.sortNum}}" class="panel-collapse collapse"></div>
    </div>
    {{# }); }}
</script>
<script id="pageElementConditionTpl" type="text/template">
    <div class="panel-body" style = "border:0px;">
        {{# layui.each(d.data, function(index, a){ }}
        {{# layui.each(a.pageImageElementConditionList, function(index, b){ }}
        <div class="ele-info">
            <p>页面元素：{{a.pageElementName||''}}；需要&nbsp;{{b.name}}；</p>
            <p>{{b.description}}</p>
        </div>
        {{# }); }}
        {{# }); }}
    </div>
</script>
<script id="fontParamSourceTpl" type="text/template">
    <div class="panel-body" style = "border:0px;">
        <ul class="list-group">
            <li class="list-group-item" style="height: auto; padding-top:0px;">
                <div class="re-body">
                    <p>requestBody：//输入参数</p>
                    <p>{</p>
                    <ul class="list-group field">
                        {{# layui.each(d.data, function(index, a){ }}
                        {{# if(a.children == null || a.children.length == 0){ }}
                        <li class="list-group-item">
                            {{# if(a.objectType=='2'){ }}
                            <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '-'}}</p>
                            <br>
                            <p>}],</p>
                            {{# } else { }}
                            <p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '-'}}{{a.fieldEnumListName || ''}}</span></p>
                            {{# if(a.frontFieldSource){ }}<p class="font-source">{{a.frontFieldSource}}</p>{{# } }}
                            {{# if(a.frontFieldRemark ){ }}<p class="font-source">备注：{{a.frontFieldRemark}}</p>{{# } }}
                            {{# } }}
                        </li>
                        {{# } else { }}
                        <li class="list-group-item">
                            {{# if(a.children.length > 1){ }}
                            <p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
                            <ul class="list-group field">
                                {{# layui.each(a.children, function(index, b){ }}
                                <li class="list-group-item" style = "margin-left:10px;">
                                    <p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
                                    {{# if(b.frontFieldSource){ }}<p class="font-source">{{b.frontFieldSource}}</p>{{# } }}
                                    {{# if(b.frontFieldRemark ){ }}<p class="font-source">备注：{{b.frontFieldRemark}}</p>{{# } }}
                                </li>
                                {{# }); }}
                            </ul>
                            <p>}],</p>
                            {{# } else { }}
                            <p>"{{a.fieldEnName}}" : ["{{a.children[0].mockData || '一'}}"], // {{a.fieldName || '一'}}</p>
                            {{# if(a.frontFieldSource){ }}<p>{{a.frontFieldSource}}</p>{{# } }}
                            {{# if(a.frontFieldRemark ){ }}<p>备注：{{a.frontFieldRemark}}</p>{{# } }}
                            {{# } }}
                        </li>
                        {{# }}}
                        {{# }); }}
                    </ul>
                    <p>}</p>
                </div>
            </li>
        </ul>
    </div>
</script>

<script>
    var navliData = ['bffImgList','tableList','usageList'];
    const tabPaneInfo = [{'id':'box-page','name':'页面数'},{'id':'box-relationtable','name':'表数量'},{'id':'box-bff','name':'接口数'},{'id':'box-dubbo','name':'接口数'}];
    var prefix = ctx + "page/page/new",pageData,pageListData,interfaceId=0;
    $(function() {
        $('body').layout({ initClosed: false, west__size: 240 });
        $('[data-toggle="offcanvas"]').click(function () {
            if($('#wrapper').attr("class").indexOf("all-toggled")>=0 ){
                $('#wrapper').removeClass('all-toggled')
            }else if($('#wrapper').attr("class").indexOf("toggled")==-1){
                $(".sidebar-wrapper .contentTab li:eq(0) a").click()
            }
            $('#wrapper').toggleClass('toggled');
        });
        userAndDataSummaryList(0)
        // 加载页面页表
        //pageList();
        // 加载版本列表-默认页面版本
        objectVersion(2);
    });
    var flag = 1;
    function tabClick(index) {
        flag = index;
        if ($('#wrapper').attr("class").indexOf("toggled") >= 0) {
            $('#wrapper').removeClass('toggled');
            $('#wrapper').removeClass('all-toggled');
        }
        // 页面版本
        objectVersion(2);
    }
    $("body").on('click','.box-swiper-li li',function(){
        // 左侧列表点击事件
        $(".box-swiper-li li").removeClass("active")
        $(this).addClass("active")
        $("input[name='userId']").val($(this).data("id"));
        pageList();
    }).on('change','.versionSelect',function(){
        $("input[name='productVersionId']").val($(this).val());
        pageList();
    }).on('click','.contentTab a',function(){
        var action = $(this).data("action");
        if(action) {
            window[action]();
        }
        //关闭已经打开的部分 问题部分特殊处理
        if(action != "relationQuestionList" && $("#wrapper").attr("class").indexOf("all-toggled")>=0){
            $("#wrapper").removeClass("all-toggled").addClass("toggled")
        }
    }).on('click','.sidebar-wrapper .tab-content li',function(){
        $('.sidebar-wrapper .tab-content li').removeClass("active");
        $(this).addClass("active");
        let {type,index} = $(this).data();
        console.log(type,index)
        let data = window[navliData[type-1]][index];
        data.contentType = type;
        // 接口图页面，后面判断是否展开抽屉
        if (type != 1) {
            $("#wrapper").removeClass("toggled").addClass("all-toggled");
        }
        // 接口详情
        let contentDetailsTplHtml = $("#contentDetailsTpl").html();
        laytpl(contentDetailsTplHtml).render(data, function (html) {
            $("#nav-content-detail").empty();
            $("#nav-content-detail").append(html);
        });
        if (type == 1) {
            // 页面大图ID
            var pageImageId = $("#pageDetailsDiv .carousel-indicators li.active").data("id");
            $("#wrapper").removeClass("toggled").addClass("all-toggled");
            //接口图
            interfacePartImg(data.id)
            // 加载bff接口参数
            bffParamList("", data.id, 2);
            // 加载虚拟用况
            bffVirtualUsageList(data.id);
            // 接口用况
            interfaceUsageList(data.id);
        }
    }).on('click','.virtualUsage .panel-heading',function(){
        var idName = $(this).attr("href");
        $(idName).html().length ==0 && bffParamList(idName, $(this).data("id"),3);
    }).on('click', ".table-detail", function () {
        var tableId = $(this).attr("tableId");
        $.operate.addTab2("表详情", ctx + "interface/interface/table_detail/" + tableId);
    }).on('click', ".aHref", function () {
        var {path,tit} = $(this).data();
        $.operate.addTab2(tit, ctx + path);
    }).on('click', ".delInterface", function () {
        var interfaceId = $(this).attr("id");
        let config = {
            url: ctx + "interface/interface/remove",
            type: "post",
            dataType: "json",
            data: {"ids": interfaceId},
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }).on('click', ".uploadImage", function () {
        var parentId = $("#pageDetailsDiv .carousel-indicators li.active").data("id");
        var id = $(this).data("id");
        var title = "上传图片";
        var url = ctx + "interface/interface/add_bff_img/" + id+"?parentId="+parentId;
        var width = 800;
        var height = $(window).height() - 50;
        $.modal.open(title, url, width, height);
    }).on('click', ".table-detail", function () {
        var tableId = $(this).attr("tableId");
        $.operate.addTab2("表详情", ctx + "interface/interface/table_detail/" + tableId);
    }).on('click', ".usageDetailsCls", function () {
        var usageId = $(this).attr("usageId");
        $.operate.addTab2("用况详情", ctx + "usage/usage/detail/" + usageId);
    }).on('click','.container-left .container-ul li',function() {
        $('.container-left .container-ul li').removeClass("active");
        $(this).addClass("active");
        interfaceId = 0
        pageData = pageListData[$(this).index()]
        pageInterfaceDetail(pageData.id,interfaceId);
        $("#wrapper").removeClass("toggled all-toggled")
    }).on('click','.setMainImage',function() {
        // 无图片点击直接返回
        if($("#navCarouselDiv .carousel-indicators li").length==0){
            return false
        }
        let {id,objid,ismaster} = $("#navCarouselDiv .carousel-indicators li.active").data();
        let data =  $(this).data();
        if(ismaster == "N") {
            $.modal.confirm("是否设为主图吗？", function() {
                editImage({id:id,objectId:objid,isMaster:'Y'},data.id)
            })
        } else {
            $.modal.confirm("是否取消主图吗？", function() {
                editImage({id:id,objectId:objid,isMaster:'N'},data.id)
            })
        }
    }).on('click','.delImage',function() {
        // 无图片点击直接返回
        if($("#navCarouselDiv .carousel-indicators li").length==0){
           return false
        }
        let {id,objid } = $("#navCarouselDiv .carousel-indicators li.active").data();
        $.modal.confirm("确定删除吗？", function() {
            deleteImage(id,objid)
        })
    }).on('click','#navCarouselDiv .carousel-indicators li',function() {
        var index = $(this).index();
        $("#partImageIntro dl").hide();
        $("#partImageIntro dl[data-index='"+index+"']").show();
        var isMaster = $(this).data("ismaster");
        if(isMaster != null && isMaster == "Y") {
            $(".setMainImage").html("取消主图");
        }
        //切换图片更新相应的数据
        if($("#collapse0 .navtabs li") && $("#collapse0 .navtabs li.active a").attr("href").indexOf("#fontSourcePreview")>=0){
            queryBffInterfaceField($(this).data("id"));
        }
        if($("#collapse0 .navtabs li") && $("#collapse0 .navtabs li.active a").attr("href").indexOf("#pageElementCondition")>=0){
            getConditionList($(this).data("id"));
        }
    }).on('click','#collapse0 .navtabs li a',function() {
        var action = $(this).data("action")
        action && window[action]();
    }).on('click','.interface-ul li',function() {
        $('.interface-ul li').removeClass("active");
        $(this).addClass("active");
        var {pindex, index} = $(this).data()
        pageData = pageListData[pindex]
        interfaceId = pageData.interfaceList[index].id
        pageInterfaceDetail(pageData.id,pageData.interfaceList[index].id);
        // 接口切换右侧抽屉处理
        $("#wrapper").removeClass("toggled all-toggled")
        $('[data-toggle="offcanvas"]').click()
    }).on('click', ".partPage", function(e) {
        var url = $(this).attr("src");
        var json = {
            "title": "预览",
            "start": 0,
            "data": [{
                "src": url,
            }]
        };
        layer.photos({
            photos: json,
            closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
            anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    }).on('click', ".add-question", function () {
        var title = "提问题";
        var url = ctx + "interface/interface/add_question/" + pageData.id + "/3";
        var width = 800;
        var height = $(window).height() - 50;
        $.modal.open(title, url, width, height);
    }).on('click','.page-name .list-group-item',function() {
        $(this).toggleClass("active");
        // 加载页面大图
        pageImgList(pageData.id, 0);
    }).on('click','.delete-question',function(){
        var id = $(this).attr("data-id");
        var config = {
            url: ctx + "questionInfo/questionInfo/remove?ids=" + id,
            type: "POST",
            dataType: "json",
            data: null,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    $.modal.msgSuccess("删除成功");
                    relationQuestionList();
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
        // 删除标签事件
    }).on('click','.fa-remove',function(e) {
        var tagId = $(this).data("id");
        $.modal.confirm("是否删除页面标签？", function() {
            deletePageTag(tagId);
        })
        e.stopPropagation();
    }).on('click','.pageQuestionHandle',function(e) {
        var questionId = $(this).data("id");
        $.modal.confirm("确定问题已解决么？", function() {
            handleQuestion(questionId);
        });
    }).on('click','#pageImgListDiv .carousel-indicators li',function() {
        $('#wrapper').removeClass('toggled all-toggled');
    }).on('change','.pageStatusCls',function(e) {
        var objectStatus = $(this).val();
        var config = {
            url: ctx + "userDataAuth/userDataAuth/updateStatus",
            type: "POST",
            dataType: "json",
            data: {
                objectId: pageData.id,
                objectStatus:objectStatus,
                objectType:3
            },
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    pageData.objectStatus = objectStatus;
                    if(0 == objectStatus) {
                        $("#pageStatusDesc").html("未完成");
                    } else if(1 == objectStatus) {
                        $("#pageStatusDesc").html("进行中");
                    } else {
                        $("#pageStatusDesc").html("已完成");
                    }
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    });

    /**
     * 用户权限列表
     */
    function userList() {
        let config = {
            url: ctx + "userDataAuth/userDataAuth/userList",
            type: "post",
            dataType: "json",
            data: {"objectType": 3},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    var userListSelectTplHtml = $("#userListSelectTpl").html();
                    laytpl(userListSelectTplHtml).render(result.data, function (html) {
                        $("#userListSelectDiv").empty();
                        $("#userListSelectDiv").append(html);
                    });
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }
    /**
     * objectType
     */
    function userAndDataSummaryList(objectType) {
        contentType = objectType;
        let config = {
            url: ctx + "userDataAuth/userDataAuth/userAndDataSummaryList",
            type: "post",
            dataType: "json",
            data: {"objectType":objectType+3},
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    let data = result.data || [];
                    Object.assign(result,tabPaneInfo[objectType],{type:objectType})
                    var containerContentHtml = $("#boxMainTabsTpl").html();
                    laytpl(containerContentHtml).render(result, function (html) {
                        $("#box-main-tabs").empty();
                        $("#box-main-tabs").append(html);
                    });
                    //存在数据默认显示第一个
                    if(data.length >= 0){
                        $("input[name='userId']").val(data[0].userId);
                        // 页面列表
                        pageList();
                    }
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }
    /**
     * 页面页表
     * @param params
     */
    function pageList() {
        var params = {};
        params.userId = $("input[name='userId']").val();
        params.productVersionId = $("input[name='productVersionId']").val();
        let config = {
            url: ctx + "page/page/new/list",
            type: "post",
            dataType: "json",
            data: params,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    pageListData = result.data || [];
                    var containerUlTplHtml = $("#containerUlTpl").html();
                    laytpl(containerUlTplHtml).render(pageListData, function (html) {
                        $("#containerUl").empty();
                        $("#containerUl").append(html);
                    });
                    var interfaceUlTplHtml = $("#interfaceUlTpl").html();
                    laytpl(interfaceUlTplHtml).render(pageListData, function (html) {
                        $("#interfaceList").empty();
                        $("#interfaceList").append(html);
                    });
                    pageData = pageListData.length>0?pageListData[0]:{};
                    if(Object.keys(pageData)==0){
                        pageData.id = -1
                    }
                    pageInterfaceDetail(pageData.id,0);
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }

    /**
     * 页面详情
     * @param params
     */
    function pageInterfaceDetail(pageId, interfaceId) {
        pageData.type = 0;
        pageData.interfaceId2 = interfaceId;
        // 页面详情
        var pageDetailsTplHtml = $("#pageDetailsTpl").html();
        laytpl(pageDetailsTplHtml).render(pageData, function (html) {
            $('#pageDetailsDiv').empty();
            $('#pageDetailsDiv').append(html);
        });
        // 页面大图列表
        pageImgList(pageId, interfaceId);
    }

    /**
     * 页面大图列表
     * @param params
     */
    function pageImgList(pageId, interfaceId) {
        var pageTagIds = []
        $(".page-name .list-group-item.active").each((e,v)=>{
            pageTagIds.push($(v).data("id"));
    });
        pageTagIds = pageTagIds.join(',');
        // 页面大图
        let config = {
            url: prefix + "/pageInterfaceImg",
            type: "post",
            dataType: "json",
            async:false,
            data: {
                "pageId": pageId,
                "interfaceId": interfaceId,
                "pageTagIds": pageTagIds
            },
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    pageData.imgList = result.data || [];
                    // 页面大图列表
                    var pageImgListTplHtml = $("#pageImgListTpl").html();
                    laytpl(pageImgListTplHtml).render(pageData, function (html) {
                        $('#pageImgListDiv').empty();
                        $('#pageImgListDiv').append(html);
                    });
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }

    /**
     * 根据主图id和接口返回图片列表
     * @param params
     */
    function interfacePartImg(id) {
        var parentId = $("#pageDetailsDiv .carousel-indicators li.active").data("id");
        let config = {
            url: prefix + "/queryPartImgByParentIdAndInterface",
            type: "post",
            dataType: "json",
            data: {"parentId": parentId, "interfaceId": id},
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    pageData.imgList = result.data;
                    pageData.type = 1;
                    // 接口局部图列表
                    var pageImgListTplHtml = $("#pageImgListTpl").html();
                    laytpl(pageImgListTplHtml).render(pageData, function (html) {
                        $('#navCarouselDiv').empty();
                        $('#navCarouselDiv').append(html);
                    });
                    if(result.data && result.data.length>0 && result.data[0].isMaster == "Y") {
                        $(".setMainImage").html("取消主图");
                    } else {
                        $(".setMainImage").html("设为主图");
                    }
                    var partImageIntroTplHtml = $("#partImageIntroTpl").html();
                    laytpl(partImageIntroTplHtml).render(pageData, function (html) {
                        $('#partImageIntro').empty();
                        $('#partImageIntro').append(html);
                    });
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }

    /**
     * 页面关联接口
     * @param pageData
     */
    var bffImgList;
    function relationBffImgList() {
        if (!pageData) {
            return false
        }
        var resultJson=[];
        // 页面大图id
        var pageImageId = $("#pageDetailsDiv .carousel-indicators li.active").data("id");
        if (pageImageId == null) {
            $("#content-relation-bff-img").empty();
            return false;
        }
        var params = {"pageId": pageData.id, "pageImageId": pageImageId};
        if (flag == 2) {
            params.interfaceId = interfaceId;
        }
        var config = {
            url: prefix + "/interfaceList",
            type: "POST",
            dataType: "json",
            async: false,
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    resultJson = result.data|| [];
                }
            }
        };
        $.ajax(config);
        bffImgList = resultJson;
        console.log(JSON.stringify(bffImgList));
        var relationBffImgListTplHtml = $("#relationBffImgListTpl").html();
        laytpl(relationBffImgListTplHtml).render(resultJson, function (html) {
            $("#content-relation-bff-img").empty();
            $("#content-relation-bff-img").append(html);
            // 点击接口自动展开 获取大图id存在延时 数据存在
            bffImgList.length>0 && interfaceId != 0 && setTimeout(function () {
                $(".sidebar-wrapper .tab-content li:eq(0)").click()
            }, 600);
        });
    }

    function bffParamList(idName, interfaceId, interfaceType) {
        idName = idName||'#collapse0';
        var params = {};
        params.interfaceId = interfaceId;
        params.interfaceType = interfaceType;
        var config = {
            url: ctx + "interface/interface/paramList",
            type: "POST",
            dataType: "json",
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    var bffParamTplHtml = $("#bffParamTpl").html();
                    var data = result.data;
                    convertResponse(data);
                    laytpl(bffParamTplHtml).render(data, function (html) {
                        if(idName=='#collapse0'){
                            $("#collapse0 #params").html('');
                            $("#collapse0 #params").html(html);
                        }else{
                            $(idName).empty();
                            $(idName).append(html);
                        }
                    });
                }
            }
        };
        $.ajax(config);
    }

    /**
     * 接口虚拟用况
     */
    function bffVirtualUsageList(interfaceId){
        var params = {};
        params.interfaceId = interfaceId;
        var config = {
            url: ctx + "interface/interface/virtualUsageList",
            type: "post",
            dataType: "json",
            data: params,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    var data = {};
                    data.list = result.data || [];
                    var bffVirtualUsageTplHtml = $("#bffVirtualUsageTpl").html();
                    laytpl(bffVirtualUsageTplHtml).render(data, function (html) {
                        $(".virtualUsage").remove();
                        $("#virtualUsage").after(html);
                    });
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }

    /**
     * 接口用况
     */
    function interfaceUsageList(interfaceId) {
        var config = {
            url: ctx + "interface/interface/usageList",
            type: "post",
            dataType: "json",
            data: {"interfaceId":interfaceId},
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    var data = {};
                    data.list = result.data || [];
                    var bffUsageTplHtml = $("#bffUsageTpl").html();
                    laytpl(bffUsageTplHtml).render(data, function (html) {
                        $("#bffUsageListDiv").empty();
                        $("#bffUsageListDiv").append(html);
                    });
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }

    /**
     *  页面关联表
     * @param pageData
     */
    var tableList;
    function relationTableList() {
        var resultJson;
        var config = {
            url: prefix + "/tableList",
            type: "POST",
            dataType: "json",
            async: false,
            data: {"pageId":pageData.id},
            success: function (result) {
                if (result && result.code == 0) {
                    resultJson = result.data||[];
                }
            }
        };
        $.ajax(config);
        var relationTableListTplHtml = $("#relationTableListTpl").html();
        laytpl(relationTableListTplHtml).render(resultJson, function (html) {
            $("#content-relation-table").empty();
            $("#content-relation-table").append(html);
        });
        tableList = resultJson;
    }

    /**
     *  页面关联用况
     * @param pageData
     */
    var usageList;
    function relationUsageList() {
        var resultJson;
        var config = {
            url: prefix + "/usageList",
            type: "POST",
            dataType: "json",
            async: false,
            data: {"pageId":pageData.id},
            success: function (result) {
                if (result && result.code == 0) {
                    resultJson = result.data || [];
                }
            }
        };
        $.ajax(config);
        var relationUsageListTplHtml = $("#relationUsageListTpl").html();
        laytpl(relationUsageListTplHtml).render(resultJson, function (html) {
            console.log(html)
            $("#content-relation-usage").empty();
            $("#content-relation-usage").append(html);
        });
        usageList = resultJson;
    }

    /**
     * 图片设置
     * @param id 图片id
     * @param objectId 图片关联对象id
     * @param params 图片相应处理对象
     */
    function editImage(params,interfaceId){
        var resultJson;
        var config = {
            url:  ctx + "fileInfo/fileInfo/edit",
            type: "POST",
            dataType: "json",
            async: false,
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    // 接口局部图
                    interfacePartImg(params.objectId);
                    if(params.isMaster == "Y") {
                        $(".setMainImage").html("取消主图");
                    } else {
                        $(".setMainImage").html("设为主图");
                    }
                }
            }
        };
        $.ajax(config);
    }

    /**
     * 删除图片
     */
    function deleteImage(id,interfaceId){
        var resultJson;
        var config = {
            url:  ctx + "page/page/deleteImg",
            type: "POST",
            dataType: "json",
            async: false,
            data: {id:id},
            success: function (result) {
                if (result && result.code == 0) {
                    interfacePartImg(interfaceId)
                }
            }
        };
        $.ajax(config);
    }

    /**
     * 问题备注
     */
    function relationQuestionList() {
        var params = {};
        params.objectId = pageData.id;
        params.objectType = "3";
        var resultJson;
        var config = {
            url: ctx + "interface/interface/questionList",
            type: "POST",
            dataType: "json",
            async: false,
            data: params,
            success: function (result) {
                if (result && result.code == 0) {
                    resultJson = result.data;
                }
            }
        };
        $.ajax(config);
        if(!resultJson) {
            return false;
        }
        var data = {};
        data.list = resultJson;
        data.questionCount = resultJson.length;
        // data.owner = owner;
        data.contentType = 4;
        // 接口详情
        $("#wrapper").removeClass("toggled").addClass("all-toggled");
        let contentDetailsTplHtml = $("#contentDetailsTpl").html();
        laytpl(contentDetailsTplHtml).render(data, function (html) {
            $("#nav-content-detail").empty();
            $("#nav-content-detail").append(html);
        });
    };
    /**
     * 处理问题
     */
    function handleQuestion(questionId) {
        var config = {
            url:  ctx + "questionInfo/questionInfo/edit",
            type: "POST",
            dataType: "json",
            data: {id:questionId,handleStatus:1},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    // 刷新页面问题
                    relationQuestionList();
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }

    /**
     * 页面或者接口版本
     * params versionType 版本类型 1接口 2页面
     */
    function objectVersion(versionType) {
        var config = {
            url:  ctx + "product/productInfo/versionList",
            type: "GET",
            dataType: "json",
            data: {
                "versionType":versionType
            },
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    var data = result.data || [];
                    var versionListSelectTplHtml = $("#versionListSelectTpl").html();
                    laytpl(versionListSelectTplHtml).render(data, function (html) {
                        $("#versionListSelectDiv").empty();
                        $("#versionListSelectDiv").append(html);
                    });
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg);
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }
    /**
     * 入参来源设置
     */
    function queryBffInterfaceField(pageImageId){
        var pageImageId = pageImageId||$("#navCarouselDiv .carousel-indicators li.active").data("id");
        if(!pageImageId){
            var paramsTplHtml = $("#fontParamSourceTpl").html();
            laytpl(paramsTplHtml).render({}, function (html) {
                $("#collapse0 #fontSourcePreview").html('');
                $("#collapse0 #fontSourcePreview").html(html);
            });
            return false;
        }
        let {type,index} = $('.sidebar-wrapper .tab-content li.active').data();
        let data = window[navliData[type-1]][index];
        var config = {
            url: ctx + "frontInterfaceFieldSource/frontInterfaceFieldSource/queryBffInterfaceField",
            type: "get",
            dataType: "json",
            data: {
                interfaceId:data.id,
                isInParam:1,
                pageImageId:pageImageId,
                pageId:pageData.id,
            },
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    var paramsTplHtml = $("#fontParamSourceTpl").html();
                    laytpl(paramsTplHtml).render(result, function (html) {
                        $("#collapse0 #fontSourcePreview").html('');
                        $("#collapse0 #fontSourcePreview").html(html);
                    });
                }
            }
        };
        $.ajax(config);
    }
    /**
     * 查询元素判断条件列表
     */
    function getConditionList(pageImageId) {
        var pageImageId = pageImageId||$("#navCarouselDiv .carousel-indicators li.active").data("id");
        if(!pageImageId){
            var pageElementConditionTplHtml = $("#pageElementConditionTpl").html();
            laytpl(pageElementConditionTplHtml).render({}, function (html) {
                $("#collapse0 #pageElementCondition").html('');
                $("#collapse0 #pageElementCondition").html(html);
            });
            return false;
        }
        let config = {
            url: ctx + "pageImageElementRef/pageImageElementRef/conditionList",
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                "pageId": pageData.id,
                "pageImageId": pageImageId
            }),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    var pageElementConditionTplHtml = $("#pageElementConditionTpl").html();
                    laytpl(pageElementConditionTplHtml).render(result, function (html) {
                        $("#collapse0 #pageElementCondition").html('');
                        $("#collapse0 #pageElementCondition").html(html);
                    });
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }
</script>
</body>
</html>
